<template>
  <div id="outsourcingOut">
    <div class="outsourcingOut">
      <div class="documentInput">
        <el-input placeholder="单据编码" v-model="from.documentInput" clearable>
        </el-input>
      </div>
      <div class="documentStatesInput" v-show="!from.isShow">
        <el-select
          class="documentState"
          v-model="from.documentStateValue"
          clearable
          placeholder="单据状态"
        >
          <el-option
            v-for="item in documentOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="businessStatesInput" v-show="!from.isShow">
        <el-select
          v-model="from.businessStateValue"
          clearable
          placeholder="业务状态"
        >
          <el-option
            v-for="item in businessOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="saleInput" v-show="from.isShow">
        <el-input placeholder="销售单号" v-model="from.saleInput" clearable>
        </el-input>
      </div>
      <div class="materialInput" v-show="from.isShow">
        <el-input placeholder="物料编码" v-model="from.materialInput" clearable>
        </el-input>
      </div>
      <div class="materialNameInput" v-show="isShow">
        <el-input
          placeholder="物料名称"
          v-model="from.materialNameInput"
          clearable
        >
        </el-input>
      </div>
      <div class="timeInput">
        <el-date-picker
          v-model="from.timeInput"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="headerSearch">
        <el-button icon="el-icon-search" type="primary" @click="Search"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="header-Bottom">
      <div class="header-Bottom-Left">
        <div class="document">
          <el-button
            :icon="
              from.isShow ? 'el-icon-document' : 'el-icon-c-scale-to-original'
            "
            type="primary"
            @click="isShow()"
            >{{ from.isShow ? "单据" : "明细" }}</el-button
          >
        </div>
        <div class="selectBut">
          <el-button icon="el-icon-menu" type="primary" @click="selectAll"
            >查询所有</el-button
          >
        </div>
        <div class="elSelect">
          <el-select
            v-model="from.selectValue"
            @change="selectValue"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="addBut">
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click="AddoutsourcingOut"
            >新增</el-button
          >
          <el-button
            icon="el-icon-bell"
            type="success"
            v-show="!from.isShow"
            :disabled="from.disabled"
            plain
            @click="process"
            >审核</el-button
          >
          <el-button
            icon="el-icon-close-notification"
            type="info"
            v-show="!from.isShow"
            :disabled="from.disabled"
            @click="returnProcess"
            plain
            >反审核</el-button
          >
          <el-button
            icon="el-icon-printer"
            type="warning"
            v-show="!from.isShow"
            :disabled="from.disabled"
            plain
            >打印</el-button
          >
        </div>
      </div>
      <div class="header-Bottom-right">
        <span class="getTime">{{ from.getTime }}</span>
        <span class="previousMonth" @click="previousMonth">上一期间</span>
        <span class="nextMonth" @click="nextMonth">下一期间</span>
      </div>
    </div>
    <div class="outsourcingOutTable">
      <OutsourcingTable
        :headData="headData"
        :tableData="tableData"
        :pageSizes="from.pageSizes"
        :pageNum="from.pageNum"
        :pageSize="from.pageSize"
        :isShow="from.isShow"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @select="select"
      >
        <template v-slot:wmCode="{ row }">
          <div class="DocumentCode">{{ row.wmCode }}</div>
        </template>
        <template v-slot:params.sisName="{ row }">
          <div
            class="DocumentStatus"
            :class="
              row.params.sisName == '开立'
                ? 'open'
                : row.params.sisName == '审核'
                ? 'auditing'
                : 'return'
            "
          >
            {{ row.params.sisName }}
          </div>
        </template>

        <template v-slot:invoiceDate="{ row }">
          <div>
            {{ row.invoiceDate }}
          </div>
        </template>
        <template v-slot:Saleno="{ row }">
          <div>
            {{ row.Saleno ? "-" : "-" }}
          </div>
        </template>
        <template v-slot:invName="{ row }">
          <div class="materialName" @click="openDrawer(row.invName)">
            {{ row.invName }}
          </div>
        </template>
        <template v-slot:params.iTName="{ row }">
          <div class="materialName" @click="openDrawer(row.invName)">
            {{ row.params.iTName }}
          </div>
        </template>
        <template v-slot:params.wHName="{ row }">
          <div>
            {{ row.params.wHName }}
          </div>
        </template>
        <template v-slot:params.swsName="{ row }">
          <div>
            {{ row.params.swsName }}
          </div>
        </template>
        <template v-slot:operation="{ row }">
          <div>
            <span class="edit" @click="editOperation(row)">编辑</span>
            <span class="delete" @click="deleteOperation(row.Serial)"
              >删除</span
            >
          </div>
        </template>
      </OutsourcingTable>
    </div>
    <div class="drawer">
      <el-drawer
        :title="from.title"
        :visible.sync="from.drawer"
        :direction="from.direction"
      >
        <span>我来啦!</span>
      </el-drawer>
    </div>
  </div>
</template>
  <script>
import url from "@/api/axios";
import axios from "axios";
import headData from "@/menuList/headData.json";
import tableData from "@/menuList/tableData.json";
import OutsourcingTable from "@/ComponentsTable/outsourcingTable";
export default {
  name: "outsourcingOut",
  components: {
    OutsourcingTable,
  },
  data() {
    return {
      from: {
        isShow: 1,
        businessStateValue: "",
        documentStateValue: "",
        documentInput: "",
        saleInput: "",
        materialInput: "",
        materialNameInput: "",
        timeInput: "",
        selectValue: "",
        getTime: "",
        pageNum: 1,
        pageSize: 10,
        total: 0,
        disabled: true,
        pageSizes: [5, 10, 20, 30],
        drawer: false,
        title: "",
        direction: "rtl",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      businessOptions: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "挂起",
        },
        {
          value: "3",
          label: "手工关闭",
        },
        {
          value: "4",
          label: "系统关闭",
        },
      ],
      documentOptions: [
        {
          value: "1",
          label: "开立",
        },
        {
          value: "2",
          label: "审核",
        },
        {
          value: "3",
          label: "退回",
        },
      ],
      options: [
        {
          value: "1",
          label: "成品仓",
        },
        {
          value: "2",
          label: "半成品仓",
        },
        {
          value: "3",
          label: "零部件仓",
        },
        {
          value: "4",
          label: "原料仓",
        },
        {
          value: "5",
          label: "五金仓",
        },
      ],
      headData: [],
      tableData: [],
      selection: [],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.from.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.from.pageNum = val;
    },
    isShow() {
      this.from.isShow = !this.from.isShow;
      if (!this.from.isShow) {
        this.from.isShow = 0;
      } else {
        this.from.isShow = 1;
      }
    },
    forDate() {
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      this.from.getTime = year + "年" + "-" + month + "月";
    },
    previousMonth() {
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      month = month < 10 ? "0" + month++ : month++;
      this.from.getTime = year + "年" + " - " + month + "月";
    },
    nextMonth() {
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      this.from.getTime = year + "年" + " - " + month + "月";
    },
    AddoutsourcingOut() {
      this.$router.push({
        name: "Editoutsourcing",
        params: { id: 1 },
      });
      this.$emit("chage", "委外出库单");
    },
    //仓库选项
    selectValue(value) {
      console.log(value);
      let str = "";
      switch (value * 1) {
        case 1:
          str = "成品仓";
          break;
        case 2:
          str = "半成品仓";
          break;
        case 3:
          str = "零部件仓";
          break;
        case 4:
          str = "原料仓";
          break;
        case 5:
          str = "五金仓";
          break;
      }
      let arr = this.tableData.filter((item, index) => {
        return str == item.params.wHName;
      });
      this.tableData = arr;
    },
    select(selection) {
      console.log(selection);
      this.from.disabled = true;
      if (selection.length > 0) {
        this.from.disabled = false;
      }
      this.selection = [];
      this.selection = selection;
      console.log(this.selection);
    },
    process() {
      this.$confirm("确定审核选中出库单?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          for (let i of this.selection) {
            console.log(i.params.sisName);
            if (i.params.sisName == "开立") {
              this.$message({
                type: "success",
                message: "审核成功!",
              });
              i.params.sisName = "审核";
            } else if (i.params.sisName != "开立") {
              this.$message({
                type: "error",
                message: "单据状态必须为开立状态",
              });
            } else {
              this.$message({
                type: "error",
                message: "单据日期和期间不符",
              });
            }
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    returnProcess() {
      this.$confirm("确定撤销审核选中出库单?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          for (let i of this.selection) {
            if (i.params.sisName == "审核") {
              this.$message({
                type: "success",
                message: "撤销成功!",
              });
              i.params.sisName = "退回";
            } else if (i.params.sisName != "审核") {
              this.$message({
                type: "error",
                message: "必须为审核状态",
              });
            }
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消反审核",
          });
        });
    },
    selectAll() {
      this.getData();
    },
    Search() {
      this.axios
        .get(`${url}/getDetailIdData`, {
          params: {
            wmCode: this.from.documentInput,
            invCode: this.from.materialInput,
            invName: this.from.materialNameInput,
          },
        })
        .then((res) => {
          console.log(res);
          for (let i in res.data) {
            res.data[i].params = JSON.parse(res.data[i].params);
            let now = new Date(res.data[i].invoiceDate);
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let date = now.getDate();
            month = month < 10 ? "0" + month : month;
            date = date < 10 ? "0" + date : date;
            res.data[i].invoiceDate = year + "-" + month + "-" + date;
          }
          this.tableData = res.data;
          console.log(this.tableData);
        });
    },
    openDrawer(materialName) {
      this.from.title = materialName;
      this.from.drawer = true;
    },
    deleteOperation(Serial) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          for (let i in this.tableData) {
            if (this.tableData[i].Serial == Serial) {
              this.tableData.splice(i, 1);
            }
          }
          console.log("jj");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editOperation(row) {
      this.$emit("chage", "委外出库单");
      this.$router.push({
        name: "Editoutsourcing",
        params: {
          rowData: row,
          id: 2,
        },
      });
    },
    getData() {
      axios.get(`${url}/getdetail`).then((res) => {
        if (res.data.status == 200) {
          console.log(res);
          this.tableData = res.data.data;
          console.log(this.tableData);
          for (let i in this.tableData) {
            this.tableData[i].Serial = i + 1;
            this.tableData[i].params = JSON.parse(this.tableData[i].params);
            let now = new Date(this.tableData[i].invoiceDate);
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let date = now.getDate();
            month = month < 10 ? "0" + month : month;
            date = date < 10 ? "0" + date : date;
            this.tableData[i].invoiceDate = year + "-" + month + "-" + date;
          }
          console.log(this.tableData);
        }
      });
    },
  },
  created() {
    this.headData = headData.headDataData;
    this.from.pageSize = this.from.pageSizes[0];
    this.getData();
  },
  mounted() {
    this.forDate();
  },
};
</script>
  <style lang="less"  scoped>
#outsourcingOut {
  position: relative;
}
.outsourcingOut {
  display: flex;
  margin-bottom: 25px;
  .businessStatesInput,
  .documentInput,
  .saleInput,
  .materialInput,
  .materialNameInput,
  .timeInput,
  .documentStatesInput {
    margin-right: 10px;
  }
  .documentState {
    width: 150px !important;
  }
}

.header-Bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  .header-Bottom-Left {
    display: flex;
    .document,
    .selectBut,
    .elSelect,
    .addBut {
      margin-right: 10px;
    }
  }
  .header-Bottom-right {
    .previousMonth,
    .nextMonth {
      color: #1890ff;
      font-size: 13px;
      cursor: pointer;
    }
    .getTime {
      font-size: 13px;
      font-weight: 500;
    }
  }
}
.outsourcingOutTable {
  margin-top: 20px;
  .DocumentCode {
    color: #18aeff;
  }
  .open {
    color: #e6a23c;
  }
  .auditing {
    color: #7fcc5a;
  }
  .return {
    color: #909399;
  }
  .examine {
    color: #54beff;
    cursor: pointer;
  }
  .edit {
    color: #50d3ab;
    cursor: pointer;
  }
  .delete {
    color: #ff4984;
    cursor: pointer;
  }
  .materialName {
    cursor: pointer;
  }
}
</style>
  <style>
.outsourcingOut .el-input__inner {
  height: 36px;
  line-height: 36px;
  width: 200px;
}
.outsourcingOut .el-button--primary {
  height: 36px;
  line-height: 36px;
  padding: 0 20px;
}
.outsourcingOut .el-date-editor .el-range-separator {
  line-height: 30px;
}
.header-Bottom .el-button--primary {
  height: 30px;
  line-height: 30px;
  padding: 0 18px;
  font-size: 12px;
}
.header-Bottom .selectBut .el-button--primary {
  background: #e8f4ff;
  color: #1890ff;
}
.header-Bottom .el-select .el-input__inner {
  height: 30px;
  line-height: 30px;
  width: 150px;
}
.documentStatesInput .el-select .el-input__inner {
  width: 150px;
}
.businessStatesInput .el-select .el-input__inner {
  width: 120px;
}
.businessStatesInput .el-input__icon,
.documentStatesInput .el-input__icon {
  line-height: 30px;
}
.header-Bottom .elSelect .el-input__icon {
  line-height: 30px;
}

.header-Bottom .addBut .el-button {
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
}

.outsourcingOutTable .el-table th.el-table__cell {
  background: #f8f8f9;
  font-weight: 500;
  text-align: center;
  color: #000;
}
.outsourcingOutTable .el-table .el-table__cell {
  text-align: center;
  padding: 6px 0;
}
</style>
    